<!--
 * @Descripttion:
 * @version:
 * @Author: sueRimn
 * @Date: 2020-10-22 14:29:41
 * @LastEditors: sueRimn
 * @LastEditTime: 2020-11-04 20:40:35
-->
<template>
  <div id="showMobilePreview">
    <div class="swicthHeader">
      <el-radio-group v-if="ischangebtn" v-model="radio1" @change="changeRadio">
        <el-radio-button label="1">欢迎页</el-radio-button>
        <el-radio-button label="2">做题页</el-radio-button>
        <el-radio-button label="3">结束页</el-radio-button>
      </el-radio-group>
    </div>
    <div class="mobile_preview_header"><i class="mobile_preview_header_icon" /></div>
    <div id="mobileBox" class="mobile_preview_frame">
      <!-- <iframe id="child" :src="show_url" style="height:100%;width:100%" /> -->
    </div>
    <div class="mobile_preview_footer"><i class="mobile_preview_footer_icon" /></div>
    <div v-if="radio1 == 2" class="tipsText">点击左右滑动浏览试题内容</div>
  </div>
</template>

<script>
export default {
    props: {
        'show_url': String,
        'zhuJiuan': {
            type: Boolean,
            default: false
        },
        'ischangebtn': {
            type: Boolean,
            default: true
        }
    },
    //   props: ['show_url'],
    data() {
        return {
            radio1: 1
        }
    },
    watch: {
        show_url: {
            handler: function(item) {
                if (item) {
                    this.radio1 = 1
                    this.page_typeUrl = item + '&page_type=1'

                    if (this.zhuJiuan) {
                        this.page_typeUrl = item
                    }
                    console.log('是否有item', this.page_typeUrl)

                    // 动态强制刷新
                    this.$nextTick(() => {
                        if (document.getElementById('iframe')) {
                            console.log('动态强制刷新')
                            this.destroyIframe()
                        }
                        this.createIframe()
                    })
                }
            },
            immediate: true
        }
    },
    mounted() {
    /**
      * iframe-宽高自适应显示
      */
        // function changeMobsfIframe() {
        //   const mobsf = document.getElementById('child')
        //   const deviceWidth = document.body.clientWidth
        //   const deviceHeight = document.body.clientHeight
        //   console.log('deviceWidth', deviceWidth)
        //   console.log('deviceHeight', deviceHeight)
        //   mobsf.style.width = (Number(deviceWidth) - 30) + 'px' // 数字是页面布局宽度差值
        //   mobsf.style.height = (Number(deviceHeight) - 80) + 'px' // 数字是页面布局高度差
        // }

        // changeMobsfIframe()

    },
    methods: {
    //   动态生成 iframe
        createIframe() {
            var iframe = document.createElement('iframe')
            iframe.style.width = '104%'
            iframe.style.height = '100%'
            iframe.style.margin = '0'
            iframe.style.padding = '0'
            iframe.style.overflow = 'hidden'
            iframe.style.border = 'none'
            iframe.id = 'iframe'
            iframe.src = this.page_typeUrl
            document.getElementById('mobileBox').appendChild(iframe)
        },

        // 销毁 iframe
        destroyIframe() {
            var thisNode = document.getElementById('iframe')
            thisNode.src = 'about:blank'
            document.getElementById('mobileBox').removeChild(thisNode)
        },
        changeRadio(index) {
            console.log('changeRadio', index)
            this.page_typeUrl = this.show_url + `&page_type=${index}`
            // 动态强制刷新
            this.$nextTick(() => {
                if (document.getElementById('iframe')) {
                    console.log('动态强制刷新')
                    this.destroyIframe()
                }
                this.createIframe()
            })
        }
    }
}
</script>

<style scoped lang='scss'>
// iframe {
//     border-width: 0;
// }
#showMobilePreview {
    width: 350px;
    height: 731px; //768px
    opacity: 1;
}

.mobile_preview_header {
    display: block;
    height: 40px;
    width: 350px;
    background: #eeeff2;
    text-align: center;
    line-height: 40px;
    border-top-right-radius: 50px;
    border-top-left-radius: 50px;
}

.mobile_preview_header_icon {
    display: inline-block;
    width: 65px;
    height: 10px;
    background: #c8c9cc;
    border-radius: 9px;
    vertical-align: middle;
    margin-top: 18px;
}

.mobile_preview_frame {
    width: 350px;
    min-height: 294px;
    height: 550px;
    overflow: hidden;
    max-height: calc(100vh - 166px);
    border: 6px solid #eeeff2;
    background-color: #fff;
    display: block;
}

#YuFrameMobilePreview {
    border: none;
    width: 375px;
    height: 100%;
}

.mobile_preview_footer {
    display: block;
    height: 52px;
    width: 350px;
    background: #eeeff2;
    text-align: center;
    line-height: 45px;
    border-bottom-right-radius: 50px;
    border-bottom-left-radius: 50px;
}

.mobile_preview_footer_icon {
    display: inline-block;
    width: 43px;
    height: 43px;
    background: #c8c9cc;
    border-radius: 50%;
    vertical-align: middle;
}

.swicthHeader {
    width: 100%;
    height: 80px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.tipsText {
    width: 100%;
    height: 20px;
    line-height: 20px;
    text-align: center;
    color: #c8c9cc;

    margin-top: 10px;
}
</style>
